<template>
	<div class="code-preview">
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="900" destroy-on-close @closed="$emit('closed')"
             :close-on-press-escape="mode != 'show' ? false : true" :align-center="true">
		<el-tabs v-model="activeTab">
			<el-tab-pane
					v-for="(item, index) in code"
					:label="item.name"
					:name="`index${index}`"
					:key="index"
			>
				<div style="height: 70vh;position: relative;" ref="change_tab">
					<el-scrollbar>
<!--						<pre><code class="javascript">{{item.content}}</code></pre>-->
<!--						<highlightjs autodetect :code="item.content" />-->
						<sc-code-editor v-model="item.content" mode="javascript" theme="darcula" :options="{lineNumbers:false}" style="height: 70vh"></sc-code-editor>
					</el-scrollbar>

					<div style="position: absolute;right: 30px;top: 5%;">
						<el-button @click="handleCopy(item.content)" type="primary"  icon="el-icon-CopyDocument" size="large" link>复制</el-button>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</el-dialog>
	</div>

</template>

<script>
import useClipboard from 'vue-clipboard3'
import {defineAsyncComponent} from "vue";
const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor'));

export default {
	emits: ['success', 'closed'],
	components: {
		scCodeEditor,
	},
	props: {
		code: {
			type: Array,
			default: () =>[]
		},
	},
	data() {
		return {
			mode: "show",
			titleMap: {
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			activeTab:'index0',
			list:[],
			id:'',
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//加载树数据
		//表单提交方法
		async handleCopy(text) {
			try {
				await useClipboard().toClipboard(text);
				this.$message.success("复制成功")
			}catch (e){
				this.$message.error("复制失败")
			}

		},
		//表单注入数据
		setData(data) {
			this.id = data.id
			//可以和上面一样单个注入，也可以像下面一样直接合并进去
			//Object.assign(this.form, data)
		}
	}
}
</script>
